<template>
	<view class="charts_box">
		<qiun-data-charts type="area" :opts="opts_mon" :chartData="chartData_mon" />
	</view>
</template>

<script>
	import config from '@/config.js';
	import {
		getMonLine,
		getTimesLine,
		getSendTimesCount,
		getTimesStat,
		getMonStat
	} from '../../api/work/market.js';
	export default {
		data() {
			return {
				imgUrl: config.imgUrl,
				allCount: 0,
				monList: [],
				specialList: [],
				getSpecialsList: [],
				current: 0,
				list1: [{
						name: 'MoN'
					},
					{
						name: '时之沙'
					}
				],
				listAudit: [{
					name: 'MoN'
				}],
				imgUrl: config.gillUrl,
				chartData_times: {},
				times_line: [],
				times_num: 0,
				chartData_mon: {},
				mon_line: [],
				user_line: [],
				chartData_user: {},
				getSendTimrrrCount: {},
				user_num: 0,
				mon_num: 0,
				day: '',
				TimeSandsRecord: [],
				opts_mon: {
					color: ['#a8c647'],
					enableScroll: false,
					dataLabel: false,
					legend: {
						show: false
					},
					xAxis: {
						disabled: true,
						axisLine: false,
						disableGrid: true
					},
					yAxis: {
						disabled: true,
						disableGrid: true,
						min: 0
					},
					extra: {
						tooltip: {
							gridType: 'dash',
							legendShape: 'circle'
						},
						area: {
							type: 'curve',
							opacity: 0.2,
							gradient: false,
							addLine: true,
							width: 3.5,
							activeType: 'hollow'
						}
					}
				},
				opts_user: {
					color: ['#bf5a3a'],
					enableScroll: false,
					dataLabel: false,
					legend: {
						show: false
					},
					xAxis: {
						disabled: true,
						axisLine: false,
						disableGrid: true
					},
					yAxis: {
						disabled: true,
						disableGrid: true,
						min: 0
					},
					extra: {
						tooltip: {
							gridType: 'dash',
							legendShape: 'circle'
						},
						area: {
							type: 'curve',
							opacity: 0.2,
							gradient: false,
							addLine: true,
							width: 3.5,
							activeType: 'hollow'
						}
					}
				},
				// 市值
				opts_mon: {
					color: ["#bf5a3a", "#91CB74"],
					enableScroll: false,
					legend: {
						show: false
					},
					xAxis: {
						disabled: true,
						axisLine: false,
						disableGrid: true
					},
					yAxis: {
						disabled: true,
						disableGrid: true,
					},
					extra: {
						column: {
							type: "group",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							barBorderCircle: true,
							linearType: "custom"
						}
					}
				},
				chartData_stat: {},
				// 金豆
				opts_stat: {
					color: ['#1890FF'],
					enableScroll: false,
					dataLabel: false,
					legend: {},
					xAxis: {
						disabled: true,
						axisLine: false,
						disableGrid: true
					},
					yAxis: {
						disabled: true,
						disableGrid: true,
						data: [{
								position: 'left',
								min: 0
							},
							{
								position: 'left',
								min: 0
							}
						]
					},
					extra: {
						mix: {
							column: {},
							line: {}
						}
					}
				}
			};
		},
		async mounted() {
			await this.setMon();
			await this.setUser();
			await this.setTimes();
			await this.setTimesStat();
		},
		created() {
			this.getSendTiCount();
		},

		methods: {
			gospecial() {
				this.onShow = true;
				// uni.setStorageSync('specialIndex', 10);
			},
			thousandSign2(num) {
				return (num + '').replace(/\d(?=(\d{3})+$)/g, '$&,');
			},
			//沙沙数量
			async getSendTiCount() {
				const res = await getSendTimesCount();
				this.getSendTimrrrCount = res.data;
			},
			async setMon() {
				const res = await getMonLine(30);
				res.data[0].forEach((item) => {
					this.mon_line.push(item);
				});
				res.data[1].forEach((item) => {
					this.user_line.push(item);
				});
				this.user_num = this.user_line[this.user_line.length - 1];
				this.mon_num = this.mon_line[this.mon_line.length - 1];
				const indexArray = this.mon_line.map((i, index) => index);
				let data_mon = {
					categories: [...indexArray],
					series: [{
						name: '',
						data: [...this.mon_line],
						pointShape: 'none',
						legendShape: 'none',
						style: 'curve'
					}]
				};
				this.chartData_mon = JSON.parse(JSON.stringify(data_mon));
			},
			async setTimesStat() {
				//获取时之沙的价格统计数据 带成交量
				const res = await getTimesStat();
				const dealNum = res.data.dealNum;
				const price = res.data.price;
				const indexArray = dealNum.map((i, index) => index);

				let data_stat = {
					categories: [...indexArray],
					series: [{
							name: '成交量',
							type: 'column',
							data: [...dealNum],
							pointShape: 'none',
							legendShape: 'square'
						},
						{
							name: '成交价格',
							type: 'line',
							index: 1,
							color: '#2fc25b',
							data: [...price],
							pointShape: 'none',
							legendShape: 'triangle'
						}
					]
				};
				this.chartData_stat = JSON.parse(JSON.stringify(data_stat));
			},
			async setUser() {
				const indexArray = this.user_line.map((i, index) => index);
				let data_user = {
					categories: [...indexArray],
					series: [{
						name: '',
						data: [...this.user_line],
						pointShape: 'none',
						legendShape: 'none'
					}]
				};
				this.chartData_user = JSON.parse(JSON.stringify(data_user));
			},
			// 市值折线图
			async setTimes() {
				const res = await getMonStat();
				res.data.forEach((item) => {
					this.times_line.push(item);
				});
				this.times_num = this.times_line[this.times_line.length - 1];
				const indexArray = this.times_line.map((i, index) => index);
				let data_times = {
					categories: [...indexArray],
					series: [{
						name: '',
						data: [...this.times_line],
						pointShape: 'none',
						legendShape: 'none'
					}]
				};
				this.chartData_times = JSON.parse(JSON.stringify(data_times));
			}
		}
	};
</script>

<style scoped lang="less">
	.charts_box {
		width: 680rpx;
		height: 280rpx;
		margin-top: 20rpx;
	}
</style>